//查询所有试卷类别
<template>
  <div class="contain">
    <!-- 查询框 -->
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.name" placeholder="请输入学生姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" :disabled="refreshState==0" type="success" icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 按钮 -->
    <el-row>
      <el-button @click="addStudent()"   type="primary">添加学生信息</el-button>
      <!--// :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
      <el-button type="primary" @click="batchDelect" :disabled="this.sels.length === 0">批量删除</el-button>
    </el-row>
    <!-- 表单 -->
    <el-table :data="pagination"  @selection-change="handleSelectionChange"> border>
      <el-table-column fixed="left" 
      type="selection"
      width="55">
      </el-table-column>
      <el-table-column prop="fakeId" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="130"></el-table-column>
      <el-table-column prop="sex" label="性别" width="100"></el-table-column>
      <el-table-column prop="school" label="学校" width="170"></el-table-column>
      <el-table-column prop="grade" label="年级" width="150"></el-table-column>
      <el-table-column prop="classes" label="班级" width="130"></el-table-column>
      <el-table-column prop="telephone" label="手机号" width="130"></el-table-column>
      <el-table-column fixed="right" label="操作" width="230">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteRecord(scope.row.id)" type="danger" size="small">删除</el-button>
          <el-button @click="studentDetails(scope.row)" type="success" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 handleSizeChange 每页几条，  handleCurrentChange 当前页，current-page	当前页数，支持 .sync 修饰符	， page-size每页显示条目个数，支持 .sync 修饰符-->
    <!-- :current-page.sync当前页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :hide-on-single-page="hidePagination"
      :page-size="5"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
    <!-- 编辑对话框-->
    <el-dialog
      title="编辑学生信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.sex"></el-input>
          </el-form-item>     
          <el-form-item label="学校">
            <el-input v-model="form.school"></el-input>
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="form.grade"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="form.classes"></el-input>
          </el-form-item>    
          <el-form-item label="手机号">
            <el-input v-model="form.telephone"></el-input>
          </el-form-item>     
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submit(form.id)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增试卷分类 -->
    <el-dialog
      title="新增学生信息"
      :visible.sync="paperclassVisible"
      width="30%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.sex"></el-input>
          </el-form-item>     
          <el-form-item label="学校">
            <el-input v-model="form.school"></el-input>
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="form.grade"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="form.classes"></el-input>
          </el-form-item>   
          <el-form-item label="手机号">
            <el-input v-model="form.telephone"></el-input>
          </el-form-item>   
          
          <!-- <el-form-item label="父级分类">
            <el-input v-model="form.fid"></el-input>
          </el-form-item>           -->
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitStudentInfo()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 学生详情查看 -->
      <el-dialog title="查看学生详细信息" :visible.sync="studentInfoVisible" width="60%">
        <el-descriptions class="margin-top" title="学生信息" :column="2" :size="size" border>         
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{this.dataDialog.name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              性别
            </template>
            {{this.dataDialog.sex}}
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              学校
            </template>
            {{this.dataDialog.school}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              年级
            </template>
            <el-tag size="small">{{this.dataDialog.grade}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              班级
            </template>
             {{this.dataDialog.classes}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{this.dataDialog.telephone}}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 详细信息 -->
        <el-tag type="info">考试记录</el-tag>
        <el-table
          :data="eRecordData"
          style="width: 100%" height="250">
          <el-table-column
            prop="fakeId"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="exam_ename"
            label="考试名称"
            width="220">
          </el-table-column>
          <el-table-column
            prop="exam_time"
            label="考试时间"
            width="220">
          </el-table-column>
          <el-table-column
            prop="exam_anserTime"
            label="答卷时间"
            width="220">
          </el-table-column>
           <el-table-column
            prop="state"
            label="状态"
            width="100">
          </el-table-column>
        </el-table>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span> -->
      </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {}, //保存点击以后当前试卷的信息
      pagination: [

        ],
      formInline: {
      name:"",
      status:"",
      page: 1,
      limit: 5,
      },
      currentPage:1,
      pageSize:5,
      total:1,
      hidePagination:false,
      searchCode:0,//判断是在findAll状态，还是在搜索状态进行操作
      searchPageCode:0,//为了在搜索状态下，对搜索出的结果进行页面跳转判断
      dialogVisible: false,
      paperclassVisible: false,
      sels: [],
      
      //重置键是否可用
      refreshState:0,
      //学生详细信息是否可见
      studentInfoVisible:false,
      //存储单个学生的信息
      dataDialog: {
        
      },
      //学生详细信息列表的尺寸
      size: '',
      eRecordData: []
    
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    //start
    findAll(){
      this.$axios.get('/api/studentsManage/findAll/'+this.currentPage+'/'+this.pageSize)
        .then(res => {
          this.pagination = res.data.data.list
          this.total=res.data.data.total
          this.hidePagination=true
          
        })
        .catch(err => {
          
        })
      
    }, 
   
    cancel(){//取消按钮
      this.paperclassVisible = false;//隐藏新增弹窗
      this.dialogVisible = false;//隐藏编辑弹窗
      this.id='';//把已经选择的id还原为空的初始状态
      this.form={};//把已经选择的form还原为空的初始状态

    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.currentPage=val
      let currentPage=this.currentPage
      let code= this.searchCode
      //console.log(`当前页: ${currentPage}`);
      if (code==1) {
        this.searchPageCode=1;
        this.search();
      } else {
        this.findAll();
      }
    },
    edit(data) { //编辑学生信息之前进行查询
      this.form = data
      this.dialogVisible = true
      // this.$axios({
      //   url:'/api/studentsManage/updateBefore',
      //   method:'post',
      //   data: {
      //     id:`${classCode}`,
      //   }

      // }).then(res => { //根据学生id请求后台
      //   if(res.data.code == 200) {
      //     this.form = res.data.data
      //   }       
      // })
    },
    handleClose(done) { //关闭提醒
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        }).catch(_ => {});
    },
    submit(studentId) { //提交修改后的学生信息
      this.dialogVisible = false
      this.$axios({
        url:'/api/studentsManage/updateStudent',
        method:'post',
        data: {
          id:`${studentId}`,
          
          ...this.form
        }
        
      }).then(res => {
        if(res.data.code == 200) {
          this.$message({ //成功修改提示
            message: '更新成功',
            type: 'success'
          })
        }
        let code= this.searchCode
        //console.log("编辑code",code)
        if (code==1) {
          this.search();
        } else {
          this.findAll();
        }
      })
    },
    deleteRecord(classCode) {//删除单条记录
      this.$confirm("确定删除该记录吗,该操作不可逆！！！","删除提示",{
        confirmButtonText: '确定删除',
        cancelButtonText: '算了,留着',
        type: 'danger'
      }).then(()=> { //确认删除
        this.$axios({
          url: `/api/studentsManage/delete/${classCode}`,
          method: 'get',
        }).then(res => {
          let code= this.searchCode
          //console.log("编辑code",code)
          if (code==1) {
            this.search();
          } else {
            this.findAll();
          }
        })
      }).catch(() => {

      })
    },
    
    studentDetails(data) {//查看学生详情
      
      // console.log("详情",data)
      this.dataDialog=data
      this.studentInfoVisible=true
      console.log("看学生详情",this.dataDialog)
      console.log("看学生id",this.dataDialog.id)
      this.$axios.get('/api/studentsManage/findErecord/'+this.dataDialog.id)
        .then(res => {
          console.log("xinxi",res.data.data)
          this.eRecordData=res.data.data
          console.log("ac",this.eRecordData)
          
        })
        .catch(err => {
          
        })
      
    },
    // 添加学生信息
    addStudent(){
      this.paperclassVisible = true   //让添加表单出现
    }, 
    submitStudentInfo() { //提交添加的学生信息
      console.log("表格",this.form);
      if (this.form.name==null||this.form.sex==null||this.form.school==null||this.form.grade==null||this.form.classes==null||this.form.telephone==null) {
        this.$message({ //成功添加提示
              message: '表格中不能留空',
              type: 'warning'
            })
      } else {
        this.paperclassVisible = false
        /* console.log(this.form.fid);
         console.log(this.value);*/
        this.form.creator=JSON.parse(window.localStorage.getItem('userdata')).username;
     
        this.$axios({
          url:'/api/studentsManage/insertStudent',
          method:'post',
          data: {
            ...this.form
          }
        }).then(res => {
          if(res.data.code == 200) {
            this.$message({ //成功添加提示
              message: '添加成功',
              type: 'success'
            })
          }
          this.form={}
          //在正常情况下新增，在搜索情况下添加
          let code= this.searchCode
          //console.log("编辑code",code)
          if (code==1) {
            this.search();
          } else {
            this.findAll();
          }
        })
      }
      

    },
    //批量删除
    //获取选中的值
   handleSelectionChange(sels) {
     this.sels = sels;
     //console.log("选中的值",sels.map((item) => item.id));
   },
   //批量删除执行操作
   batchDelect() {
     // 删除前的提示
     this.$confirm("确认删除记录吗?", "提示", {
       type: "warning",
     }).then(() => {
       let ids = this.sels.map((item) => item.id);
       //console.log(ids); //[1,2,3,4]
       /* 根据后台想要的参数格式选择
   		  console.log(ids.join(",")); //1,2,3,4
          console.log(ids); //[1,2,3,4]
       */
       // 请求接口
       
      this.deleteVehiclds(ids)
     
     });
   },
   deleteVehiclds(ids) {     
      //console.log("批量删除",ids);
      let nums=[]
      //console.log("批量删除2",nums);
      for (var i = 0; i < ids.length; i++) {
        nums.push(ids[i]);
        //console.log("批量删除4",nums);
      }
      
      this.$axios({
        url:`/api/studentsManage/batchdelete`,
        method:'post',
        data: {
          nums
        }
      }).then(res => {
        if(res.data.code == 200) {
          this.$message({ //成功修改提示
            message: '批量删除成功',
            type: 'success'
          })
          nums=[]//清空
          let code= this.searchCode
          //console.log("编辑code",code)
          if (code==1) {
            this.search();
          } else {
            this.findAll();
          }
        }
      })
      
    },
    search(){//搜索
      let name= this.formInline.name
      if (name.length == 0) {
        this.$message({ //成功添加提示
              message: '搜索内容不能为空',
              type: 'warning'
            })
      } else {
        if (this.searchPageCode==1) {
          this.$axios({
            url:`/api/studentsManage/searchStudent`,
            method:'post',
            data: {
              name:`${name}`,
              currentPage:`${this.currentPage}`,
              pageSize:`${this.pageSize}`

            }
          }).then(res => {
            if(res.data.code == 200) {
              this.$message({ //查找成功提示
                message: '查找成功',
                type: 'success'
              })
              this.searchPageCode=0;//确保下次搜索时，curuntPage仍然在第一页
              this.searchCode = 1;
              this.pagination = res.data.data.list
              this.total=res.data.data.total
              this.hidePagination=true
              this.refreshState=1
            }else{
              this.$message({ //查找成功提示
                message: '查找失败',
                type: 'warning'
              })
            }
          })
        } else {
          this.$axios({
            url:`/api/studentsManage/searchStudent`,
            method:'post',
            data: {
              name:`${name}`,
              currentPage:1,
              pageSize:`${this.pageSize}`

            }
          }).then(res => {
            if(res.data.code == 200) {
              this.$message({ //查找成功提示
                message: '查找成功',
                type: 'success'
              })
              this.currentPage=1;//让搜索出来的结果位于第一页
              this.searchCode = 1
              this.pagination = res.data.data.list
              this.total=res.data.data.total
              this.hidePagination=true
              this.refreshState=1
            }else{
              this.$message({ //查找成功提示
                message: '查找失败',
                type: 'warning'
              })
            }
          })
        }
        
      }
    },
    reset(){//重置
      this.refreshState=0
      this.searchCode = 0
      this.formInline.name=null//让搜索框变为空
      this.findAll()

    }
   
  //end   
  },
};
</script>
<style lang="scss" scoped>
.contain {
  padding: 0px 40px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edit{
    margin-left: 20px;
  }
}
</style>
